<script setup>
import Title from '@/components/panel/components/title.vue'
import Overview from '@/components/panel/components/overview.vue'
import Gender from '@/components/panel/components/gender.vue'
import Distribution from '@/components/panel/components/distribution.vue'
import BarChart from '@/components/panel/components/barChart.vue'
import LineChart from '@/components/panel/components/lineChart.vue'
</script>

<template>
  <div class="panel">
    <Title></Title>
    <div class="part">
      <div>
        <Overview></Overview>
        <Gender></Gender>
      </div>
      <div>
        <Distribution></Distribution>
      </div>
    </div>
    <div>
      <BarChart></BarChart>
      <LineChart></LineChart>
    </div>
  </div>
</template>

<style scoped>
.panel {
  width: 100%;
  padding: 0 10px 20px 10px;
  background: #f0f0f2;

  > div {
    display: flex;
    align-items: top;
    justify-content: left;
  }
  .part {
    > div:first-child {
      width: 37%;
    }
    > div:last-child {
      width: 63%;
    }
  }
}
</style>
